<template>
  <div class="report-log">
    <div>
      <h3 class="api-title">测试报告</h3>
      <div style="margin-left:20px">
        <p><span class="font">开始日期：</span>
          2022-10-16:12:12:12</p>
        <p><span class="font">结束日期：</span> 2022-10-16:12:12:12</p>
        <p><span class="font">任务编号：</span>100</p>
        <p><span class="font">流水号：</span>235485767</p>
        <p><span class="font">执行人：</span>AiTesting</p>
      </div>

      <table class="overviewTable">
        <tbody>
          <tr>
            <th colspan="9" class="header suite" style="font-size: 14px;color: #181819">
              <div class="suiteLinks"></div>
              测试结果
            </th>
          </tr>

          <tr style="color: rgb(24, 24, 25)">
            <td width="35%">&nbsp;</td>
            <th>路径</th>
            <th>接口编号</th>
            <th>添加人</th>
            <th>执行时间</th>
            <th>通过</th>
            <th>跳过</th>
            <th>失败</th>
            <th>通过率</th>
          </tr>

          <tr v-for="(item,index) in reportList.list" :key="index">
            <td class="name test">
              <router-link target="_blank" :to="{path:'/AiTestingInterface-project/api/?api_id=' +item.interfaceId  }">
                <a>
                  {{item.interfaceName}}
                </a>
              </router-link>

            </td>
            <td class="name test">
              <router-link target="_blank" :to="{path:'/AiTestingInterface-project/api/?api_id=' +item.interfaceId }">
                <a>
                  {{item.path}}
                </a>
              </router-link>
            </td>
            <td class="name test"><a>
                {{item.interfaceId}}
              </a>
            </td>
            <td class="name test"><a>
                {{item.author}}
              </a>
            </td>
            <td class="name test">{{item.executeTime}}s</td>

            <td class="name test" v-if="item.interCaseSuccessCount ==0">{{item.interCaseSuccessCount}}</td>
            <td class="name test success" v-if="item.interCaseSuccessCount > 0">{{item.interCaseSuccessCount}}</td>
            <td class="name test">0</td>
            <td class="name test" v-if="item.interCasefailCount == 0">{{item.interCasefailCount}}</td>
            <td class="name test failed" v-if="item.interCasefailCount > 0">{{item.interCasefailCount}}</td>
            <td class="name test">{{item.successRate}}</td>
          </tr>

          <tr class="suite">
            <td colspan="5" class="totalLabel">Total</td>
            <td class="success">{{executionLogList.successCaseCount}}</td>
            <td>0</td>
            <td class="failed">{{executionLogList.failCaseCount}}</td>
            <td>{{executionLogList.successRate}}</td>
          </tr>

        </tbody>

      </table>
    </div>

  </div>
</template>

<script>
export default {
  data () {

    return {

      executionLogList: {
        successCaseCount: 223,
        failCaseCount: 15,
        successRate: "96%",
        caseExCount: 0,

      },

      reportList: {
        list: [{
          "interfaceId": 56, "interfaceName": "1、账号登录接口", "path": "/api/login/passport", "interCaseSuccessCount": 100, "interCaseCount": 1, "interCasefailCount": 10, "successRate": "100%", "executeTime": 236, "executeLogs": [{ "caseName": "登录成功" }], "author": "曹森泉"
        }, { "interfaceId": 57, "interfaceName": "2、账号注册接口", "path": "/api/login/account", "interCaseSuccessCount": 123, "interCaseCount": 1, "interCasefailCount": 5, "successRate": "100 % ", "executeTime": 135, "executeLogs": [{ "caseName": "注册成功" }], "author": "曹森泉" }],
      }

    }




  }
}
</script>

<style scoped>
.report-log .font {
  font-weight: bolder;
}

.report-log .overviewTable {
  width: 100%;
  margin-top: 1.8em;
  line-height: 1.7em;
  border-spacing: 0.1em;
}

.report-log tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

.report-log .overviewTable tr {
  height: 1.6em;
}

.report-log .suite {
  background-color: #999999;
  font-size: 14px;
  color: rgb(24, 24, 25);
}

.report-log .overviewTable tr {
  height: 1.6em;
}

.report-log .header {
  font-weight: bold;
  text-align: left;
}

.report-log .totalLabel {
  font-weight: bold;
  background-color: #ffffff;
}

.report-log .name {
  text-decoration: underline;
}

.report-log .test {
  background-color: #eeeeee;
  /* padding-left: 2em; */
}

.report-log .success {
  background-color: #88ee88;
}

.report-log .failed {
  background-color: #ff4444;
}
</style>